<template>
		<view class="container">
			<view class="shop-list">
				<view v-for="(shop,index) in shopData" :key="index" class="shop-item" @click="enterDetailPage(shop.merchantId)">
					<!-- 图片占位容器 -->
					<view class="shop-img-box">
						<image 
							class="shop-img"
							:src="shop.storefrontImageUrl[0]"
							mode="aspectFill"
							:style="{backgroundColor: shop.shopImg ? 'transparent' : '#f5f5f5'}"
						/>
					</view>
	
					<view class="shop-content">
						<view class="shop-header">
							<text class="shop-name">{{ shop.shopName }}</text>
							<text class="distance">{{ shop.distance }}m</text>
						</view>
						
						<view class="shop-info">
							<view class="rating-box">
									<uni-rate :readonly="true" :value="3" :size="14" />
							</view>
							
							<view class="detail-info">
								<text class="time">{{ shop.businessHours }}</text>
								<text class="address">{{ shop.detailedAddress }}</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
</template>

<script setup>
	import { ref,onMounted } from 'vue'
	import request from "../../../utils/request.js"
	
	var latitude = ref(0)
	var longitude = ref(0)
	
	const shopData = ref([])
	
	onMounted(() => {
		getLocal();
	})
	
	function getLocal() {
		uni.getLocation({
			type: "wgs84",
			success: function(res) {
				console.log(res)
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				longitude.value = res.longitude;
				latitude.value = res.latitude;
				getShops();
			},
			fail: function(err) {
				console.error('获取位置失败：', err);
			}
		});
	}
	function getShops(){
		request({
			url:"/gmh/emergencyRescueRecords/getNearbyBusiness?longitude="+longitude.value+"&latitude="+latitude.value+"&radius=10000",
			method:"get",
		}).then(res=>{
			console.log(res)
			shopData.value=res
		}).catch(err=>{
			console.log(err)
		})
	}
	
	
	
	const enterDetailPage = (merchantId) => {
	  console.log("当前店铺ID:", merchantId)
	  
	  // 带参数跳转（小程序路径需要提前在pages.json配置）
	  uni.navigateTo({
	    url: `/pages/gmh/store_detail/store_detail?id=${merchantId}`
	  })
	  
	}
	
</script>

<style>
	.shop-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	
	.shop-img-box {
		width: 200rpx;
		height: 150rpx;
		margin-right: 25rpx;
		flex-shrink: 0;
	}
	
	.shop-img {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
		background-color: #f5f5f5; /* 占位背景色 */
	}
	
	.shop-content {
		flex: 1;
		min-width: 0;
	}
	   .shop-list {
	   	padding: 20rpx 30rpx;
	   	background-color: #ffffff;
	   }
	   
	   .shop-item {
	   	padding: 30rpx 0;
	   	border-bottom: 1rpx solid #eee;
	   }
	   
	   .shop-header {
	   	display: flex;
	   	justify-content: space-between;
	   	align-items: center;
	   	margin-bottom: 20rpx;
	   }
	   
	   .shop-name {
	   	font-size: 32rpx;
	   	font-weight: 500;
	   	color: #333;
	   }
	   
	   .distance {
	   	font-size: 26rpx;
	   	color: #666;
	   }
	   
	   .rating-box {
	   	display: flex;
	   	align-items: center;
	   	margin-bottom: 15rpx;
	   }
	   
	   .sales {
	   	font-size: 24rpx;
	   	color: #666;
	   	margin-left: 20rpx;
	   }
	   
	   .detail-info {
	   	display: flex;
	   	flex-direction: column;
	   }
	   
	   .time, .address {
	   	font-size: 24rpx;
	   	color: #666;
	   	line-height: 1.6;
	   }    
</style>
